<template>
  <div class="user">
      <!--添加-->
      <div class="common-level-rail">
          <el-button size="small" type="primary" @click="addClick" icon="el-icon-plus">添加</el-button>
      </div>
      <!--内容-->
      <div class="product-content">
          <div class="table-wrap">
              <el-table size="small" :data="tableData" border style="width: 100%" v-loading="loading">
                  <el-table-column prop="id" label="ID" width="300"></el-table-column>
                  <el-table-column prop="tname" label="分类名称"></el-table-column>
                  <el-table-column fixed="right" label="操作" width="90">
                      <template slot-scope="scope">
                          <el-button @click="editClick(scope.row)" type="text" size="small"
                              v-auth="'/user/tag/edit'">编辑</el-button>
                          <el-button @click="deleteClick(scope.row)" type="text" size="small"
                              v-auth="'/user/tag/delete'">删除</el-button>
                      </template>
                  </el-table-column>
              </el-table>
          </div>
          <!--分页-->
          <div class="pagination">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
                  :current-page="curPage" :page-size="pageSize" layout="total, prev, pager, next, jumper"
                  :total="totalDataNumber">
              </el-pagination>
          </div>
      </div>

      <!--添加-->
      <Add v-if="open_add" :open_add="open_add" @closeDialog="closeDialogFunc($event, 'add')"></Add>

      <!--编辑-->
      <Edit v-if="open_edit" :open_edit="open_edit" :form="userModel" @closeDialog="closeDialogFunc($event, 'edit')">
      </Edit>
  </div>
</template>

<script>
import NewsApi from '@/api/news.js';
import Edit from './tedit.vue';
import Add from './tadd.vue';
import {deepClone} from '@/utils/base.js';
export default {
  components: {
      /*编辑组件*/
      Edit,
      Add
  },
  data() {
      return {
          /*是否加载完成*/
          loading: true,
          /*列表数据*/
          tableData: [],
          /*一页多少条*/
          pageSize: 20,

          type: 0,
          /*一共多少条数据*/
          totalDataNumber: 0,
          /*当前是第几页*/
          curPage: 1,
          /*是否打开添加弹窗*/
          open_add: false,
          /*是否打开编辑弹窗*/
          open_edit: false,
          /*当前编辑的对象*/
          userModel: {}
      };
  },
  created() {
      /*获取列表*/
      this.getTableList();
  },
  methods: {
      /*选择第几页*/
      handleCurrentChange(val) {
          let self = this;
          self.curPage = val;
          self.loading = true;
          self.getTableList();
      },

      /*每页多少条*/
      handleSizeChange(val) {
          this.curPage = 1;
          this.pageSize = val;
          this.getTableList();
      },

      /*获取列表*/
      getTableList() {
          let self = this;
          let Params = {};
          Params.page = self.curPage;
          Params.list_rows = self.pageSize;
          Params.type = self.type;
          NewsApi.type_lists(Params, true)
              .then(data => {
                  self.loading = false;
                  self.tableData = data.data.data;
                  self.totalDataNumber = data.data.total
              })
              .catch(error => {

              });
      },

      /*打开添加*/
      addClick() {
          this.open_add = true;
      },

      /*打开编辑*/
      editClick(item) {
          this.userModel = deepClone(item);
          this.open_edit = true;
      },

      /*关闭弹窗*/
      closeDialogFunc(e, f) {
          if (f == 'add') {
              this.open_add = e.openDialog;
              if (e.type == 'success') {
                  this.getTableList();
              }
          }
          if (f == 'edit') {
              this.open_edit = e.openDialog;
              if (e.type == 'success') {
                  this.getTableList();
              }
          }
      },
      /*删除用户*/
      deleteClick(row) {
          let self = this;
          self.$confirm('此操作将永久删除, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(() => {
              self.loading = true;
              NewsApi.type_del({
                  id: row.id
              }, true)
                  .then(data => {
                      self.loading = false;
                      if (data.code == 1) {
                          self.$message({
                              message: data.msg,
                              type: 'success'
                          });
                          self.getTableList();
                      }
                  })
                  .catch(error => {
                      self.loading = false;
                  });

          }).catch(() => {

          });
      }

  }
};
</script>

<style></style>
